<template>
<body>
  <LoginHeader></LoginHeader>
  <div class="middle-bg">
    <div class="main">
      <div class="login-panel">
        <ul class="tab">
          <li class="signIn current" id="signIn" @click="status_change1">用户名登录</li>
          <li class="register" id="register" @click="status_change2">快速注册</li>
        </ul>
        <form v-show="status" method="POST" @submit.prevent="login">
          <div class="signIn-content">
            <div class="section-input">
              <input type="text" class="phone" v-model="model.id" placeholder="请输入学号" />
            </div>
            <div class="section-input">
              <input type="password" class="password" v-model="model.password" placeholder="请输入密码" />
            </div>
            <button class="btn J_submit" id="submit_btn_id" type="submit">登录</button>
          </div>
        </form>
        <form v-show="!status" method="POST" @submit.prevent="regist">
          <div class="register-content">
            <div class="section-input">
              <input type="text" class="phone" v-model="model.id" placeholder="输入学号以快速注册" />
            </div>
            <div class="section-input">
              <input type="text" class="name" v-model="model.name" placeholder="输入姓名" />
            </div>
            <div class="section-input">
              <input type="password" class="password" v-model="model.password" placeholder="请输入密码" />
            </div>
            <button class="btn J_submit" id="register_btn_id" type="submit">注册</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="bottom-bg">
    <p>Copyright@2019 薛陈方制作</p>
  </div>
</body>
</template>
    
<script>
import LoginHeader from "../components/LoginHeader";
export default {
  components: {
    LoginHeader
  },
  data() {
    return {
      model: {},
      status: true
    };
  },
  methods: {
    async login() {
      this.model.type = "0";
      const res = await this.$http.post("/loginOV", this.model);
      //sessionStorage.token=res.data.token
      console.log(res.data.code);
      if (res.data.code === 2001 || res.data.code === 2002) {
        this.$message({
          type: "error",
          message: "用户名或密码错误"
        });
        return;
      }
      localStorage.token = res.data.token;
      var user_info = {
        id: this.model.id,
        type: this.model.type
      };
      this.$cookies.set("user_info", user_info);
      console.log(this.$cookies.get("user_info").id);
      this.$router.push("/");
      this.$message({
        type: "success",
        message: `欢迎您,${this.model.id}`
      });
    },
    async regist() {
      const res = await this.$http.post("/user", this.model);
      this.$router.push("login");
      this.$message({
        type: "success",
        message: `注册成功`
      });
      this.$router.go(0);
    },
    status_change1() {
      this.status = true;
      let obj0 = document.getElementById("signIn");
      obj0.style.borderBottom = "4px solid #3069D0";
      obj0.style.color = "#3069D0";
      let obj1 = document.getElementById("register");
      obj1.style.borderBottom = "#000";
      obj1.style.color = "#B7B7B7";
    },
    status_change2() {
      this.status = false;
      let obj2 = document.getElementById("register");
      obj2.style.borderBottom = "4px solid #3069D0";
      obj2.style.color = "#3069D0";
      let obj3 = document.getElementById("signIn");
      obj3.style.borderBottom = "#000";
      obj3.style.color = "#B7B7B7";
    }
  }
};
</script>
<style>
@import "../assets/css/signIn.css";
</style>

